<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import SearchView from '@/components/SearchView.vue'
import { Download } from '@element-plus/icons-vue'
import tokentxnsTable from './tokentxnsTable.vue'
import Pagination from '@/components/table/pagination.vue'
import { useRouter } from 'vue-router'
import { onDownload } from '@/utils/util'

const { proxy } = getCurrentInstance()
const router = useRouter()

const ercList = ref([]);
const totalCount = ref(0);
const pageNo = ref(1);
const address = ref('');
const pageSize = ref(10)
const loadingtx = ref(true)
const totalPage = ref('')


onMounted(() => {
  address.value = router.currentRoute.value.query.a || '';
  if (localStorage.getItem('pageSizets')) {
    pageSize.value = parseInt(localStorage.getItem('pageSizets'))
  }

  getTokenTransfers()
})

const getTokenTransfers = () => {
  var url = "/api/Scan/GetTokenTransfers"
  var param = {
    "pageNo": pageNo.value,
    "pageSize": pageSize.value,
    "address": address.value,
    "contract": ""
  }

  proxy.$axios.post(url, param).then((res) => {
    setTimeout(() => {
      loadingtx.value = false
    }, 500)
    if (res.code == "Success") {
      ercList.value = res.data.list
      totalPage.value = res.data.totalPage
      totalCount.value = res.data.totalCount
    }
  })
}

const handleSizeChange = (e) => {
  loadingtx.value = true
  pageSize.value = e
  pageNo.value = 1
  getTokenTransfers()
  localStorage.setItem('pageSizets', e)
  // console.log(e);
}

const update = (e) => {
  loadingtx.value = true
  pageNo.value = e;
  getTokenTransfers()
}

</script>
<template>
  <div class="txs_box bg_box">
    <div class="container">
      <SearchView>
        <div class="s_tit">
          <h3>Token Transfers
            <span>ERC-20</span>
          </h3>
          <span v-if="address">For Address <router-link :to="'/address/' + address">
              {{ address }}</router-link></span>
        </div>
      </SearchView>


      <div class="table_box">
        <el-row>
          <el-col :md=12>
            <div class="records">More than {{ totalCount }} transactions found
              <p class="c999">(Showing the last {{ totalCount }} records)</p>
            </div>
          </el-col>
          <el-col :md=12 v-if="ercList && ercList.length > 0">
            <div class="plugin">
              <button @click="onDownload(ercList, 'txns_data')">
                <el-icon>
                  <Download />
                </el-icon>
                <span>Download Page Data</span>
              </button>
              <Pagination :pageNo="pageNo" :totalPage="totalPage" @setPage="update" />
            </div>

          </el-col>
        </el-row>
        <el-skeleton :rows="5" :loading="loadingtx" animated>
          <tokentxnsTable :ercList="ercList" :address="address" />
        </el-skeleton>
        <el-row class="bt_row">
          <el-col :md=12>
            <div class="pagination">
              <el-pagination v-if="totalCount && totalCount > 10" @size-change="handleSizeChange"
                :page-sizes="[10, 20, 50]" :page-size="pageSize" v-model:currentPage="pageNo" layout="sizes"
                :total="totalCount">
              </el-pagination>
            </div>
          </el-col>
          <el-col :md=12>
            <div class="plugin">
              <Pagination :pageNo="pageNo" :totalPage="totalPage" @setPage="update" />
            </div>

          </el-col>
        </el-row>
      </div>
      <div class="tips">
        <img src="../../assets/img/tips.png" alt="" />
        <p>A transaction is a cryptographically signed instruction that changes the blockchain state. Block explorers
          track the details of all transactions in the network. Learn more about transactions in our Knowledge Base.</p>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.table_box {
  font-size: 0.75rem;
  color: var(--color-text);

  :deep(.el-table__inner-wrapper:before) {
    display: none !important;
  }


  .el-row {
    margin-bottom: 20px;
  }

  .bt_row {
    margin-top: 1rem;
    margin-bottom: 0;
  }


  .records {
    font-size: 0.9rem;

    p {
      font-size: 0.8rem;
      color: var(--color-text2);
    }
  }


}



@media (min-width: 1000px) {}
</style>
